<template>
	<view class="container">
		<up-line-progress activeColor="#282828" :percentage="30" height="4" :showText="false" ></up-line-progress>
		<view class="title">
			验证码会发送至手机
		</view>
		<up-input
		    placeholder="手机号码"
		    border="bottom"
		    clearable
			v-model="phonenum" 
			@change="achange"
		  ></up-input>
		<view class="btn" @click="next">
			下一步
		</view>
	</view>
	
</template>

<script>
	export default {
	
		data() {
			return {
				phonenum:''
			}
		},
		methods:{
			achange(value){
				console.log(value)
				this.phonenum = value
			},
			next(){
				if(this.phonenum == ''){
					uni.showToast({
						title:'请填写手机号',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/forgetPwd/forgetPwd2?phone='+ this.phonenum
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: 654rpx;
		margin: 60rpx auto;
		.title{
			font-size: 30rpx;
			font-weight: 350;
			text-align: center;
			color: #282828;
			margin-top: 56rpx;
			margin-bottom: 100rpx;
		}
		.btn{
			width: 654rpx;
			height: 90rpx;
			border-radius: 16rpx;
			opacity: 1;
			color: #fff;
			font-size: 36rpx;
			line-height: 90rpx;
			text-align: center;
			background: #0B9EE2;
			margin-top: 200rpx;
		}
	}
</style>